import React from "react";
import { useCategory } from "./useCategory";
import { useTagList } from "./useTagList";
import style from './ListQueryBox.module.scss'
export default function ListQueryBox({
  tagChange,
  categoryChange,
}: {
  tagChange: (tag: string) => void;
  categoryChange: (category: string) => void;
}): React.ReactElement {
  const { categoryList,setCategoryList } = useCategory();
  const { tagList ,setTagList} = useTagList();
  return (
    <div className={`${style['lx__search-box']} flex flex`}>
      <div className={`${style['lx__category-box']} flex`}>
        <div className={style['category-item']} onClick={() => categoryChange("")}>
          全部
        </div>
        {categoryList.list.map((category) => (
          <div
            className={`${style['category-item']} ${
              categoryList.current && categoryList.current.id === category.id
                ? style["is-active"]
                : ""
            }`}
            key={category.id}
            onClick={() => {
              setCategoryList({
                ...categoryList,
                current:category
              })
              categoryChange(category.id)
            }}
          >
            {category.name}
          </div>
        ))}
      </div>

      <div className={`${style['lx__tag-box']} flex`}>
        <div className={style['tag-item']} onClick={() => tagChange("")}>
          全部
        </div>
        {tagList.list.map((tag) => (
          <div
            className={`${style['tag-item']} ${
              tagList.current && tagList.current.id === tag.id ? style["is-active"] : ""
            }`}
            key={tag.id}
            onClick={() => {
              setTagList({
                ...tagList,
                current:tag
              })
              tagChange(tag.id)
            }}
          >
            {tag.name}
          </div>
        ))}
      </div>
    </div>
  );
}
